<template>
  <div class="channel">
    <div class="title">
      <span>我的频道</span>
      <van-button @click="isEdit = !isEdit" plain size="mini" color="red">{{
        isEdit ? "取消" : "编辑"
      }}</van-button>
    </div>
    <van-grid>
      <van-grid-item v-for="(item, index) in chanList" :key="item.id">
        <span @click="close(index)" :class="{ active: index == value }">{{
          item.name
        }}</span>
        <van-icon
            @click="delChannel(index, item)"
            v-if="isEdit && index"
            class="del-icon"
            name="cross"
          />
      </van-grid-item>
    </van-grid>
    <div class="optional">
      <span>可选频道</span>
    </div>
    <van-grid>
      <van-grid-item :text="item.name" v-for="item in optChanels" :key="item.id"  @click="addChannel(item)" />
    </van-grid>
  </div>
</template>

<script>
import {setChannel} from '@/utils/storage'
import { addChannelAPI,delChannelAPI,channelsAPI } from "@/api";
export default {
  // 父组件传过来的推荐频道
  props:{
    chanList: {
            // 必须要传，不传就会报错
            required: true,
            // 还要限制传递的数据是数组
            type: Array
        },
    channels: {
            // 必须要传，不传就会报错
            required: true,
            // 还要限制传递的数据是数组
            type: Array
        },
        value:{
          required:true,
          type:Number
        }
  },
  data() {
    return {
      // 可选频道
      isEdit: false,
    };
  },

  methods: {
    close(index) {
      // 1. 把被点的下标传递给父，让父对应的频道也选中
      this.$emit("input", index);

      // 2. 关闭底部弹出sheet
      // 因为控制这个子组件显示和隐藏的变量在父里
      // 我子里无法直接改父，所以通知父修改
      this.$emit("close");
    },
     async addChannel(item) {
      // 把被点的频道加到我的频道里
      this.chanList.push(item);
      // 判断是否有登录
      if ( this.$store.state.tokenObj.token ) {

        // 代表登录了
        await addChannelAPI({
          channels: [{ id: item.id,seq: this.chanList.length }]
        })

      }else {

        // 没登录,保存我的频道到本地
        setChannel(this.chanList)
      }
    },

    // 3. 点击x删除频道
    async delChannel(index, item) {
      // 从自己的频道数组里删除
      this.chanList.splice(index, 1);

      // 判断要删除的下标是否小于当前下标，若小于，就让高亮索引-1
      if (index < this.value) {
        this.$emit("input", this.value - 1);
      }

      // 判断是否登录
      if (this.$store.state.tokenObj.token) {
        await delChannelAPI(item.id)

      }else {

        // 没登录
        // 把剩余的我的频道数组保存到本地存储就行了
        setChannel(this.ownChannels)
      }
    },
  },
  computed: {
    optChanels() {
      // 过滤出父组件有的频道
      return this.channels.filter((value) => {
        let index = this.chanList.findIndex((v) => {
          return v.id == value.id;
        });
        return index == -1;
      });
    },
  },
};
</script>

<style lang="less" scope>
.channel {
  margin: 10px 20px;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .optional {
    margin: 15px 0;
  }
  .active {
    color: red;
  }
  .del-icon{
      position:absolute;
      top: 0;
      right: 0;
  }
}
</style>